<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Yeffect-test-case</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['hProductPictures'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
<style>
.hProductContent {
    width: 322px;
    height: 400px;
    position: relative;
}

.hProductul {
    position: relative;
    overflow: hidden;
    width: 263px;
    height: 62px;
    left: 30px;
}

.hProductul ul {
    height: 62px;
    position: absolute;
    left: 0px;
    top: 0px;
}

.hProductul ul li {
    width: 60px;
    height: 60px;
    border: 1px solid #aaa;
    margin-right: 5px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    float: left;
}

.hProductul ul li img {
    width: 60px;
    height: 60px;
    opacity: 0.7;
    transition: opacity 0.3s linear;
    -webkit-transition: opacity 0.3s linear;
}

.hProductul ul li.current {
    border-color: #FDA10A;
}

.hProductul ul li.current img {
    opacity: 1;
}

.hProductMain {
    width: 320px;
    height: 320px;
    margin-bottom: 15px;
    border: 1px solid #aaa;
}

.hProductMain img {
    width: 100%;
    height: 100%;
}

.leftArrow {
    width: 22px;
    height: 60px;
    border: 1px solid #aaa;
    line-height: 60px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: #ddd;
}

.leftArrow:hover {
    background: #eee;
}

.rightArrow {
    width: 22px;
    height: 60px;
    border: 1px solid #aaa;
    line-height: 60px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: #ddd;
}

.rightArrow:hover {
    background: #eee;
}

</style>
    <body>
        <div class="hProductContent">
        　　<div class="hProductMain"><img src="http://lorempixel.com/120/120/"></div>
        　　<div class="hProductul">
        　　　　<ul>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　　　<li><img src="http://lorempixel.com/60/60/"></li>
        　　　　</ul>
        　　</div>
        　　<div class="leftArrow"><</div>
        　　<div class="rightArrow">></div>
        </div>

    <script type="text/javascript">
        $(function(){
            /**
            * 1. 缩略图列表的父级容器名称指向 如：".Productul ul";
            * 2. 缩略图列表元素名称指向 如：".Productul ul li";
            * 3. 缩略图能同时完整显示的数量;
            * 4. 缩略图列表单项实际占用宽度减去width的值(包括左右margin值上下padding值上下border上下值之和);
            * 5. 主图的容器名称指向; 如：".ProductMain";
            * 6. 缩略图当前样式 默认"current";(选填)
            * 7. 向上箭头名称指向 默认"";(选填)
            * 8. 向下箭头名称指向 默认"";(选填)
            * 9. 缓动函数名 默认"linear";(选填)
            */
            Yeffect.hProductPictures(".hProductul ul",".hProductul ul li",4,7,".hProductMain","current",".leftArrow",".rightArrow","easeInOutCubic");
        })
    </script>
    </body>
</html>
